<template>
  <GlobalDrawer
    v-model="visible"
    :title="drawerTitle"
    :size="size"
    :before-close="handleBeforeClose"
    @confirm="handleConfirm"
  >
    <el-form
      ref="formRef"
      :model="formData"
      :rules="rules"
      label-width="120px"
      label-position="right"
      class="customer-form"
    >
      <!-- 基本信息 -->
      <div class="form-section">
        <h3 class="form-section-title">基本信息</h3>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="客户类型" prop="customer_type">
              <el-radio-group v-model="formData.customer_type">
                <el-radio :label="16">企业客户</el-radio>
                <el-radio :label="15">个人客户</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="录入人" prop="creator_id">
              <el-input v-model="formData.creator_name" readonly placeholder="请选择录入人">
                <template #append>
                  <el-button @click="selectCreator">选择</el-button>
                </template>
              </el-input>
              <input type="hidden" v-model="formData.creator_id" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="客户名称" prop="name">
              <el-input v-model="formData.name" placeholder="请输入客户名称" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="客户来源" prop="source_id">
              <CustomerSourceSelect v-model="formData.source_id" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="证件号码" prop="tax_num">
              <el-input
                v-model="formData.tax_num"
                :placeholder="
                  formData.customer_type === 16 ? '请输入统一信用代码' : '请输入身份证号码'
                "
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="客户等级" prop="grade_id">
              <CustomerGradeSelect v-model="formData.grade_id" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="是否主客户" prop="is_primary">
              <el-radio-group v-model="formData.is_primary" @change="handlePrimaryChange">
                <el-radio :label="0">否</el-radio>
                <el-radio :label="1">是</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <!-- 主客户选择器（仅当is_primary=0时显示） -->
          <el-col :span="12">
            <el-form-item label="选择主客户" required v-if="formData.is_primary === 0">
              <el-input v-model="primaryCustomerName" readonly placeholder="请选择主客户">
                <template #append>
                  <el-button @click="openPrimaryCustomerSelector">选择</el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="负责人姓名" prop="controller_name">
              <el-input v-model="formData.controller_name" placeholder="请输入负责人姓名" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="客户关系描述" prop="relation_desc">
              <el-input
                v-model="formData.relation_desc"
                placeholder="请输入客户关系描述"
                type="textarea"
                :rows="2"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <!-- 联系地址 -->
      <div class="form-section">
        <h3 class="form-section-title">联系地址</h3>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="所在地区" required>
              <RegionCascader
                v-model="regionData"
                placeholder="请选择省/市/区"
                @change="handleRegionChange"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="详细地址" prop="address">
              <el-input v-model="formData.address" placeholder="请输入详细地址" />
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <!-- 会员信息 -->
      <div class="form-section">
        <h3 class="form-section-title">会员信息</h3>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="会员状态">
              <CustomerStatusSelect v-model="formData.customer_status" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="管家">
              <el-select
                v-model="formData.belong_uid"
                placeholder="请选择管家"
                clearable
                :loading="adminList.length === 0"
                @change="handleBelongUidChange"
              >
                <el-option
                  v-for="admin in adminList"
                  :key="admin.id"
                  :label="admin.name"
                  :value="admin.id"
                />
                <el-empty v-if="adminList.length === 0" description="正在加载管家列表..." />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="归属部门">
              <el-input v-model="formData.belong_department" readonly></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="共享员工">
              <el-input v-model="formData.share_names" readonly placeholder="请选择共享人员">
                <template #append>
                  <el-button @click="selectSharedUsers">选择</el-button>
                </template>
              </el-input>
              <input type="hidden" v-model="formData.share_uids" />
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <!-- 联系人信息 -->
      <div class="form-section">
        <h3 class="form-section-title">联系人信息</h3>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="联系人" prop="contact_name">
              <el-input v-model="formData.contact_name" placeholder="请输入联系人姓名" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="联系电话" prop="contact_mobile">
              <el-input v-model="formData.contact_mobile" placeholder="请输入联系电话" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="电子邮箱" prop="contact_email">
              <el-input v-model="formData.contact_email" placeholder="请输入电子邮箱" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="微信" prop="contact_wechat">
              <el-input v-model="formData.contact_wechat" placeholder="请输入微信" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="性别">
              <el-radio-group v-model="formData.contact_gender">
                <el-radio :label="1">男</el-radio>
                <el-radio :label="2">女</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="QQ号码" prop="contact_qq">
              <el-input v-model="formData.contact_qq" placeholder="请输入QQ号码" />
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <!-- 客户介绍 -->
      <div class="form-section">
        <h3 class="form-section-title">客户介绍</h3>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="客户介绍" prop="description">
              <el-input
                v-model="formData.description"
                type="textarea"
                placeholder="请输入客户介绍信息"
                :rows="4"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>

    <!-- 用户选择弹窗 -->
    <UserDepartmentSelector v-model:visible="userSelectorVisible" @select="handleUserSelected" />

    <!-- 主客户选择器 -->
    <CustomerSelector
      ref="customerSelectorRef"
      v-model="primaryCustomerSelectorVisible"
      :current-customer-id="''"
      @select="handlePrimaryCustomerSelect"
    />
  </GlobalDrawer>
</template>

<script setup lang="ts">
  import { ref, reactive, computed, watch, onMounted } from 'vue'
  import { ElMessage, ElMessageBox, FormInstance } from 'element-plus'
  import { debounce } from 'lodash'
  import { GlobalDrawer } from '@/components/common'
  import { customerApi } from '@/api/customer'
  import { ApiResponse } from '@/types/api'
  import { CustomerSourceSelector as CustomerSourceSelect } from '@/components/business/customer'
  import { CustomerGradeSelector as CustomerGradeSelect } from '@/components/business/customer'
  import { CustomerStatusSelector as CustomerStatusSelect } from '@/components/business/customer'
  import { RegionCascader } from '@/components/business/region'
  import { UserDepartmentSelector } from '@/components/business/user'
  import CustomerSelector from '@/components/business/customer/CustomerSelector.vue'
  import { useUserStore } from '@/stores/user'

  const props = defineProps({
    modelValue: {
      type: Boolean,
      default: false,
    },
    customerId: {
      type: [Number, String],
      default: '',
    },
    mode: {
      type: String,
      default: 'add', // 'add', 'edit'
      validator: (value: string) => ['add', 'edit'].includes(value),
    },
    size: {
      type: String,
      default: '80%',
    },
    customerData: {
      type: Object,
      default: null,
    },
  })

  const emit = defineEmits(['update:modelValue', 'success'])

  // 表单引用
  const formRef = ref<FormInstance>()

  // 抽屉可见状态
  const visible = computed({
    get: () => props.modelValue,
    set: val => emit('update:modelValue', val),
  })

  // 抽屉标题
  const drawerTitle = computed(() => {
    return props.mode === 'add' ? '新增客户' : '编辑客户'
  })

  // 提交状态
  const submitting = ref(false)

  // 表单数据
  const formData = reactive({
    name: '',
    customer_type: 16,
    source_id: '',
    grade_id: '',
    controller_name: '',
    relation_desc: '',
    is_primary: 1, // 默认是主客户（1:是, 0:否）
    group_code: '', // 客户分组代码
    tax_num: '',
    contact_name: '',
    contact_mobile: '',
    contact_email: '',
    contact_qq: '',
    contact_wechat: '',
    contact_gender: 1, // 1:男, 2:女
    address: '',
    provinceid: '',
    cityid: '',
    distid: '',
    description: '',
    creator_name: '',
    creator_id: '',
    customer_status: '',
    belong_uid: '',
    belong_name: '',
    belong_department: '',
    belong_did: '',
    share_names: '',
    share_uids: '',
  })

  // 地区级联数据
  const regionData = ref<string>('')

  // 主客户名称
  const primaryCustomerName = ref('')

  // 主客户选择器引用
  const customerSelectorRef = ref()

  // 主客户选择器弹窗可见性
  const primaryCustomerSelectorVisible = ref(false)

  // 用户选择相关
  const userSelectorVisible = ref(false)
  const isSelectingCreator = ref(false)

  // 管理员列表
  const adminList = ref<any[]>([])

  // 用户store
  const userStore = useUserStore()

  // 表单验证规则
  const rules = {
    name: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
    customer_type: [{ required: true, message: '请选择客户类型', trigger: 'change' }],
    source_id: [{ required: true, message: '请选择客户来源', trigger: 'change' }],
    tax_num: [{ required: true, message: '请输入证件号码', trigger: 'blur' }],
    grade_id: [{ required: true, message: '请选择客户等级', trigger: 'change' }],
    address: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
    contact_name: [{ required: true, message: '请输入联系人姓名', trigger: 'blur' }],
    contact_mobile: [
      { required: true, message: '请输入联系电话', trigger: 'blur' },
      { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' },
    ],
    contact_email: [{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }],
  }

  // 处理地区选择变化
  const handleRegionChange = (
    value: string | number | (string | number)[] | null,
    selectedOptions: any[]
  ) => {
    if (value) {
      if (typeof value === 'string') {
        const parts = value
          .split('/')
          .map(part => parseInt(part, 10))
          .filter(num => !isNaN(num))
        if (parts.length >= 1) formData.provinceid = parts[0].toString()
        if (parts.length >= 2) formData.cityid = parts[1].toString()
        if (parts.length >= 3) formData.distid = parts[2].toString()
      } else if (Array.isArray(value)) {
        if (value.length >= 1) formData.provinceid = value[0].toString()
        if (value.length >= 2) formData.cityid = value[1].toString()
        if (value.length >= 3) formData.distid = value[2].toString()
      }
    } else {
      formData.provinceid = ''
      formData.cityid = ''
      formData.distid = ''
    }
  }

  // 监听管家ID变化
  watch(
    () => formData.belong_uid,
    newValue => {
      if (newValue && adminList.value.length > 0) {
        const selectedAdmin = adminList.value.find(admin => String(admin.id) === String(newValue))
        if (selectedAdmin) {
          formData.belong_name = selectedAdmin.name || ''
          if (selectedAdmin.department) formData.belong_department = selectedAdmin.department
          if (selectedAdmin.did) formData.belong_did = selectedAdmin.did
        }
      } else if (!newValue) {
        formData.belong_name = ''
        formData.belong_department = ''
        formData.belong_did = ''
      }
    }
  )

  // 重置表单
  const resetForm = () => {
    if (formRef.value) {
      formRef.value.resetFields()
    }

    Object.assign(formData, {
      name: '',
      customer_type: 16,
      source_id: '',
      grade_id: '',
      controller_name: '',
      relation_desc: '',
      is_primary: 1, // 默认是主客户
      group_code: '',
      tax_num: '',
      contact_name: '',
      contact_mobile: '',
      contact_email: '',
      contact_qq: '',
      contact_wechat: '',
      contact_gender: 1,
      address: '',
      provinceid: '',
      cityid: '',
      distid: '',
      description: '',
      creator_name: '',
      creator_id: '',
      customer_status: '',
      belong_uid: '',
      belong_name: '',
      belong_department: '',
      belong_did: '',
      share_names: '',
      share_uids: '',
    })

    regionData.value = ''
    primaryCustomerName.value = ''

    // 自动设置录入人为当前操作人（在新增模式下）
    // 说明：录入人默认是当前登录用户，但也允许手动修改（支持代录入场景）
    if (props.mode === 'add') {
      // 优先使用真实姓名（name），其次是用户名（username）
      // 注意：name 是后端返回的真实姓名，username 是登录账号
      const currentUserName = userStore.userInfo?.name || userStore.userInfo?.username || ''
      const currentUserId = userStore.userInfo?.id?.toString() || ''

      formData.creator_name = currentUserName
      formData.creator_id = currentUserId
    }
  }

  // 加载管理员列表
  const loadAdminList = async () => {
    try {
      const response = await customerApi.getAdminList()
      if (response.code === 0) {
        adminList.value = response.data || []
      }
    } catch (error) {
      console.error('获取管理员列表失败:', error)
    }
  }

  // 加载选项数据
  const loadOptions = async () => {
    try {
      await loadAdminList()

      // 在新增模式下，自动设置当前用户为录入人
      if (props.mode === 'add') {
        // 再次确保录入人字段已设置
        // 优先使用真实姓名（name），其次是用户名（username）
        const currentUserName = userStore.userInfo?.name || userStore.userInfo?.username || ''
        const currentUserId = userStore.userInfo?.id?.toString() || ''

        formData.creator_name = currentUserName
        formData.creator_id = currentUserId
      }
    } catch (error) {
      console.error('加载选项失败:', error)
    }
  }

  const loadCustomerDetail = async (customerId: string | number) => {
    console.log('=== CustomerDrawer loadCustomerDetail 调试信息 ===')
    console.log('customerId:', customerId, '类型:', typeof customerId)
    console.log('props.customerData:', props.customerData)
    console.log('props.customerId:', props.customerId, '类型:', typeof props.customerId)
    console.log('props.customerData存在:', !!props.customerData)

    // 类型转换确保比较正确
    const currentCustomerId = props.customerId ? String(props.customerId) : ''
    const targetCustomerId = String(customerId)
    console.log('转换后 props.customerId:', currentCustomerId)
    console.log('转换后 target customerId:', targetCustomerId)
    console.log('类型转换后相等:', currentCustomerId === targetCustomerId)

    console.log(
      '条件检查 (props.customerData && String(props.customerId) === String(customerId)):',
      !!(props.customerData && currentCustomerId === targetCustomerId)
    )
    console.log('=== 调试信息结束 ===')

    // 首先尝试使用props中的customerData（由父组件提供）
    if (props.customerData && currentCustomerId === targetCustomerId) {
      console.log('使用props中的customerData填充表单')
      fillFormWithCustomerData(props.customerData)
      return
    }

    // 如果没有提供customerData，提示需要通过props传递
    console.log(
      'CustomerDrawer组件：客户ID为',
      customerId,
      '，需要父组件通过customerData props提供客户详情数据'
    )
    console.log('缺失条件检查:', {
      customerData存在: !!props.customerData,
      customerId匹配: currentCustomerId === targetCustomerId,
      customerData内容: props.customerData,
    })
    ElMessage.warning('编辑客户时需要加载客户详情，请通过customerData属性提供客户数据')
  }

  // 使用客户数据填充表单
  const fillFormWithCustomerData = (customerInfo: any) => {
    if (!customerInfo) return

    try {
      // 填充表单数据
      Object.assign(formData, {
        name: customerInfo.name || '',
        customer_type: customerInfo.customer_type || 16,
        source_id: customerInfo.source_id || '',
        grade_id: customerInfo.grade_id || '',
        controller_name: customerInfo.controller_name || '',
        relation_desc: customerInfo.relation_desc || '',
        is_primary: customerInfo.is_primary || 0,
        group_code: customerInfo.group_code || '',
        tax_num: customerInfo.tax_num || '',
        contact_name: customerInfo.contact_name || '',
        contact_mobile: customerInfo.contact_mobile || '',
        contact_email: customerInfo.contact_email || '',
        contact_qq: customerInfo.contact_qq || '',
        contact_wechat: customerInfo.contact_wechat || '',
        contact_gender: customerInfo.contact_gender || 1,
        address: customerInfo.address || '',
        provinceid: customerInfo.provinceid || '',
        cityid: customerInfo.cityid || '',
        distid: customerInfo.distid || '',
        description: customerInfo.description || '',
        creator_name: customerInfo.creator_name || '',
        creator_id: customerInfo.creator_id || '',
        customer_status: customerInfo.customer_status || '',
        belong_uid: customerInfo.belong_uid || '',
        belong_name: customerInfo.belong_name || '',
        belong_department: customerInfo.belong_department || '',
        belong_did: customerInfo.belong_did || '',
        share_names: customerInfo.share_names || '',
        share_uids: customerInfo.share_uids || '',
      })

      // 设置地区数据
      if (customerInfo.provinceid) {
        if (customerInfo.cityid) {
          if (customerInfo.distid) {
            regionData.value = `${customerInfo.provinceid}/${customerInfo.cityid}/${customerInfo.distid}`
          } else {
            regionData.value = `${customerInfo.provinceid}/${customerInfo.cityid}`
          }
        } else {
          regionData.value = customerInfo.provinceid
        }
      }

      // 设置主客户名称
      if (customerInfo.is_primary === 0 && customerInfo.group_code) {
        primaryCustomerName.value = customerInfo.name || ''
      }

      console.log('CustomerDrawer组件：成功填充表单数据')
    } catch (error) {
      console.error('填充表单数据失败:', error)
    }
  }

  // 监听props变化，自动加载客户详情
  watch(
    [() => props.customerId, () => props.mode, () => props.modelValue],
    ([newId, newMode, visible]) => {
      console.log('=== CustomerDrawer watch 触发 ===')
      console.log('customerId:', newId, '类型:', typeof newId)
      console.log('mode:', newMode)
      console.log('modelValue (visible):', visible)
      console.log('customerData存在:', !!props.customerData)
      console.log('当前时间:', new Date().toLocaleTimeString())
      console.log('=== watch 触发信息结束 ===')

      if (visible && newMode === 'edit' && newId) {
        // 检查是否有customerData，如果没有则等待
        if (props.customerData) {
          console.log('抽屉打开且为编辑模式，customerData已准备好，开始加载客户详情:', newId)
          loadCustomerDetail(newId)
        } else {
          console.log('抽屉打开但customerData未准备好，等待数据...')
          // 延迟100ms后再次检查
          setTimeout(() => {
            if (props.customerData && props.customerId === newId) {
              console.log('延迟后customerData已准备好，开始加载客户详情:', newId)
              loadCustomerDetail(newId)
            } else {
              console.log('延迟后customerData仍未准备好，显示警告')
              ElMessage.warning('编辑客户时需要加载客户详情，请通过customerData属性提供客户数据')
            }
          }, 100)
        }
      }
    }
  )

  // 监听mode变化，重置表单
  watch(
    () => props.mode,
    () => {
      resetForm()
    },
    { immediate: true }
  )

  // 监听visible变化，加载选项数据
  watch(
    () => props.modelValue,
    newVal => {
      if (newVal) {
        loadOptions()
      }
    },
    { immediate: true }
  )

  // 处理是否主客户的变更
  const handlePrimaryChange = (value: number) => {
    if (value === 1) {
      primaryCustomerName.value = ''
      formData.group_code = ''
    }
  }

  // 打开主客户选择器
  const openPrimaryCustomerSelector = () => {
    primaryCustomerSelectorVisible.value = true
  }

  // 处理主客户选择
  const handlePrimaryCustomerSelect = (customer: any) => {
    primaryCustomerName.value = customer.name
    formData.group_code = customer.group_code
  }

  // 选择录入人
  const selectCreator = () => {
    isSelectingCreator.value = true
    userSelectorVisible.value = true
  }

  // 选择共享员工
  const selectSharedUsers = () => {
    ElMessage.info('选择共享员工功能待实现')
  }

  // 处理用户选择
  const handleUserSelected = (user: any) => {
    if (isSelectingCreator.value) {
      formData.creator_name = user.name
      formData.creator_id = user.id
    } else {
      formData.belong_name = user.name
      formData.belong_uid = user.id
      formData.belong_did = user.did
      formData.belong_department = user.department
    }
  }

  // 监听归属员工变化
  const handleBelongUidChange = (value: any) => {
    if (!value) {
      formData.belong_name = ''
      formData.belong_department = ''
      formData.belong_did = ''
    }
  }

  // 提交表单
  const handleConfirm = async () => {
    if (!formRef.value) return

    // 如果是子客户但未选择主客户，给出提示
    if (formData.is_primary === 0 && !formData.group_code) {
      ElMessage.warning('请选择主客户')
      return
    }

    await formRef.value.validate(async valid => {
      if (!valid) return

      submitting.value = true

      try {
        let response: ApiResponse<any>

        if (props.mode === 'edit') {
          // 编辑模式
          const submitData = {
            id: props.customerId, // 必须包含客户ID
            ...formData,
            contacts: [
              {
                name: formData.contact_name || '',
                mobile: formData.contact_mobile || '',
                email: formData.contact_email || '',
                wechat: formData.contact_wechat || '',
                qq: formData.contact_qq || '',
                gender: formData.contact_gender || 1,
              },
            ],
          }
          response = await customerApi.editCustomer(submitData)
        } else {
          // 新增模式
          const submitData = {
            ...formData,
            contacts: [
              {
                name: formData.contact_name || '',
                mobile: formData.contact_mobile || '',
                email: formData.contact_email || '',
                wechat: formData.contact_wechat || '',
                qq: formData.contact_qq || '',
                gender: formData.contact_gender || 1,
              },
            ],
          }
          response = await customerApi.addCustomer(submitData)
        }

        if (response.code === 0) {
          ElMessage.success(props.mode === 'edit' ? '编辑成功' : '新增成功')
          emit('success')
          closeDrawer()
        } else {
          ElMessage.error(response.msg || (props.mode === 'edit' ? '编辑失败' : '新增失败'))
        }
      } catch (error) {
        console.error('提交失败:', error)
        ElMessage.error(props.mode === 'edit' ? '编辑失败' : '新增失败')
      } finally {
        submitting.value = false
      }
    })
  }

  // 关闭抽屉前的处理
  const handleBeforeClose = async () => {
    // 检查表单是否有改动
    if (formData.name || formData.contact_name || formData.contact_mobile) {
      try {
        await ElMessageBox.confirm('确定要关闭吗？未保存的内容将会丢失', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
        return true
      } catch {
        return false
      }
    } else {
      return true
    }
  }

  // 关闭抽屉
  const closeDrawer = () => {
    visible.value = false
  }

  // 初始化
  onMounted(() => {
    resetForm()
  })
</script>

<style scoped>
  .customer-form {
    padding: 20px;
  }

  .form-section {
    margin-bottom: 20px;
  }

  .form-section-title {
    font-size: 15px;
    font-weight: 600;
    color: #303133;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid #ebeef5;
  }

  /* 覆盖GlobalDrawer的页脚样式，保持一致性 */
  :deep(.drawer-footer) {
    display: flex;
    justify-content: flex-end;
    padding: 0 20px 20px;
  }
</style>
